<template>
	<div>
		<img src="~assets/img/banner5.jpg" class="bgImg" />
		<div class="login-card">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span id="logo" v-for="(item, index) in systemsetting" v-if="item.dkey == 'logo'">{{ item.dvalue }}</span>
				</div>
				<div class="text item">
					<el-form ref="form" :model="request.data" v-loading="loading">
						<el-form-item><el-input v-model="request.data.lname" autocomplete="off" placeholder="用户名"></el-input></el-form-item>
						<el-form-item><el-input show-password v-model="request.data.pwd" autocomplete="off" placeholder="密码"></el-input></el-form-item>
						<el-form-item><el-button type="primary" @click="login">登录</el-button></el-form-item>
						<el-link type="primary" @click="toFindPwd">忘记密码</el-link>
					</el-form>
				</div>
			</el-card>
		</div>
		<div id="loginPageText">
			备案号:
			<span v-for="(item, index) in systemsetting" v-if="item.dkey == 'loginPageText'">{{ item.dvalue }}</span>
		</div>
	</div>
</template>

<script>
import caches from 'util/caches.js';
import utils from 'util/utils.js';
import api from 'api/index.js';

export default {
	name: 'login',
	data() {
		return {
			loading: false,
			request: utils.newRequest(),
			systemsetting: []
		};
	},
	methods: {
		login() {
			this.loading = true;
			api.login(
				this.request,
				response => {
					this.loading = false;
					caches.token.set(response.data);
					this.$router.replace('/');
				},
				response => {
					utils.msg.warning(response.msg);
					this.loading = false;
				}
			);
		},
		toFindPwd() {
			this.$router.replace('/findPwd');
		},
		//获取系统配置
		getSystemsetting() {
			api.getSystemsetting(null, response => {
				this.systemsetting = response.data;
				caches.setting.set(this.systemsetting);
			});
		},
		init() {
			this.getSystemsetting();
		}
	},
	mounted() {
		this.init();
		this.request.data = { lname: 'admin', pwd: '888888' };
		//回车登录
		document.onkeydown = e => {
			let key = window.event.keyCode;
			if (key == 13 || key == 100) {
				this.login();
			}
		};
	}
};
</script>

<style lang="scss" scoped="scoped">
@import '~common/custom/css/common.scss';
@import '~common/custom/css/login.scss';
</style>
